<template>
    <div>
        <el-dialog title="添加" 
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        :show-close="false"
        >
            <el-form :model="form"  :v-if="dialogFormVisible"  :rules="rules" ref="form" label-position="left" label-width="80px">


                <el-form-item label="标题" prop="title" required>
                    <el-input v-model="form.title"></el-input>
                </el-form-item>

                 <el-form-item label="加班内容" required prop="desc">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item label="加班时间" required>
                    <el-col :span="6">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">：</el-col>
                    <el-col :span="7">
                        <el-form-item prop="date2">
                            <el-time-picker placeholder="选择开始时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                        </el-form-item>
                    </el-col>
                      <el-col class="line" :span="2">-</el-col>
                    <el-col :span="7">
                        <el-form-item prop="date3">
                            <el-time-picker placeholder="选择结束时间" v-model="form.date3" style="width: 100%;"></el-time-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                   <el-form-item label="加班条" >
                    <!-- <el-input type="file" v-model="form.file"></el-input> -->

                    <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>



                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                 <el-button @click="resetForm('form')">重置</el-button>
                <el-button @click="cancal">取 消</el-button>
                <el-button type="primary"  @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name:"addovertime",
    data(){
        return{
            msg:"haha",
            dialogFormVisible:false,
            formLabelWidth: '120px',
            form:{
                title:"",
                desc:"",
                date1:"",
                date2:"",
                date3:"",
                file:""
               
            },
             fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
                 {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],

       rules: {
           title: [
             { required: true, message: '请输入标题', trigger:'blur'}
           ],
          desc: [
            { required: true, message: '请输入加班内容', trigger: 'blur' },
            { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择开始时间', trigger: 'change' }
          ],
          date3: [
            { type: 'date', required: true, message: '请选择结束时间', trigger: 'change' }
          ]
  
        }
        }
    },
    props:{
        openteg:{
            type:Boolean,
            
        }
    },
    watch:{
        openteg(val){
           this.dialogFormVisible =val;
        }
    },
    mounted(){
    //    this.resetForm('form')
    }
    ,
    methods:{
     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              console.log(this.form);
            alert('submit!');
            this.dialogFormVisible=false;
            this.resetForm('form')
             this.$emit("update");
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    resetForm(formName){
        console.log('我执行了')
        this.$refs[formName].resetFields();
      },

        cancal(){
           this.resetForm('form')
            this.dialogFormVisible = false;
            this.$emit("update");
        },
        handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
    
}
</script>
<style lang="less" scoped>
    .line{
        text-align: center;
    }
</style>